import React, {useState, useEffect} from 'react'

import {Container} from './style'

import {Timeline, Spin} from 'antd'
import { ClockCircleOutlined } from '@ant-design/icons'

import MyCard from '../../../components/MyCard'

import moment from 'moment'

import ArticleRequest from '../../../request/article_request'

const article_request = new ArticleRequest()


function File(props){
    const {history} = props
    const [fileList, setFileList] = useState([])

    const getArticleList = () => {
        article_request.getArticleList({
            type: '2'
        }).then(res => {
            let list = res
            let resList = []
            let yearObj = {}
            list = list.sort((a, b) => {
                return Number(b.createdate) - Number(a.createdate)
            })
            list.forEach(item => {
                let year = moment(Number(item.createdate)).year() + '年'
                if(yearObj[year]){
                    yearObj[year].push(item)
                }else{
                    yearObj[year] = [item]
                }
            })
            for (const key in yearObj) {
                let dateObj = {}
                let dateList = []
                yearObj[key].forEach(item => {
                    let date = moment(Number(item.createdate)).format('M月D日')
                    if(dateObj[date]){
                        dateObj[date].push(item)
                    }else{
                        dateObj[date] = [item]
                    }
                })

                for (const key in dateObj) {
                    dateList.push({
                        date: key,
                        count: dateObj[key].length,
                        content: dateObj[key]
                    })
                }
                resList.push({
                    year: key,
                    count: yearObj[key].length,
                    content: dateList
                })
            }
            setFileList(resList)
        })
    }

    useEffect(() => {
        getArticleList()
        document.getElementById('article-top-c').scrollTop = 0
    }, [])
    return (
        <Container>
            <MyCard notTitle={true}>
                <Spin spinning={fileList.length === 0}>
                    <div className="content">
                        <Timeline>
                            {
                                fileList.map(item => {
                                    return (
                                        <React.Fragment key={item.year}>
                                            <Timeline.Item dot={<ClockCircleOutlined style={{color: '#eb2f96', fontSize: 18}}/>}>
                                                <p className="year-count">{item.year} {item.count}篇</p>
                                            </Timeline.Item>
                                            {
                                                item.content.map((date, index) => {
                                                    return (
                                                        <Timeline.Item key={index}>
                                                            <p className="date">{date.date}</p>
                                                            {
                                                                date.content.map((title, i) => {
                                                                    return (
                                                                        <p key={i} className="title" onClick={() => history.push('/article/detail/' + title.id)}>《{title.title}》</p>
                                                                    )
                                                                })
                                                            }
                                                        </Timeline.Item>
                                                    )
                                                })
                                            }
                                        </React.Fragment>
                                    )
                                })
                            }
                            {
                                fileList.length !== 0 ? 
                                <Timeline.Item dot={<ClockCircleOutlined style={{color: '#eb2f96', fontSize: 18}}/>}>
                                    <p className="year-count">没有更多的了</p>
                                </Timeline.Item>
                                : ''
                            }
                        </Timeline>
                    </div>
                </Spin>
            </MyCard>
        </Container>
    )
}

export default File